<template>
    <div class="my-ztree-select" ref="myZtreeSelectRef" :title="deptName">
        <a-popover :arrow="arrow" :destroyTooltipOnHide="true" placement="bottom" v-model:open="visible" trigger="click"
            :overlayInnerStyle="overlayInnerStyle" @openChange="handleOpenChange">
            <template #content>
                <div @animationstart="handleInitZtree" :id="ztreeId" class="ztree-content ztree __a">
                </div>
            </template>
            <a-input :class="{
    'not-filled': !deptName && isSubmit && isRequire
            }" v-model:value="deptName" type="text" :placeholder="placeholder" readonly></a-input>
        </a-popover>
    </div>
</template>
<script setup>
import { defineProps, toRefs, ref, nextTick, reactive, computed, onMounted, inject } from 'vue'
import ztreeOption from '@/utils/ztreeOption';
import { createUuid } from '@/utils'
const props = defineProps({
    value: {
        type: Array,
        default: () => []
    },
    placeholder: {
        type: String,
        default: ''
    },
    check: {
        type: String,
        default: 'checkbox'
    },
    isRequire: {
        type: String,
        default: false
    }
})

const { value, placeholder, check, isRequire } = toRefs(props)

const isSubmit = inject('isSubmit')

const deptName = computed(() => value.value.map(item => item.deptName).join('、'))

const visible = ref(false)

const arrow = ref(false)

const myZtreeSelectRef = ref()

const overlayInnerStyle = reactive({
    width: 0
})

const ztreeExample = ref()

const ztreeId = ref(`ztree-${createUuid()}`)

const getFilePath = (treeObj) => {
    if (treeObj == null) return "";
    let filename = treeObj.name;
    let pNode = treeObj.getParentNode();
    if (pNode != null) {
        filename = `${getFilePath(pNode)}/${filename}`;
    }
    return filename;
}

const onCheck = (event, treeId, treeNode) => {
    if (treeNode.checked) {
        if (check.value === 'checkbox') {
            value.value.push({
                deptId: treeNode.id,
                deptName: getFilePath(treeNode)
            })
        } else {
            value.value[0] = {
                deptId: treeNode.id,
                deptName: getFilePath(treeNode)
            }
        }
    } else {
        const index = value.value.findIndex(item => item.deptId === treeNode.id)
        value.value.splice(index, 1)
    }
}

// 设置返回结果
const dataFilter = (treeId, parentNode, res) => {
    const childNodes = res.data
    const selectIds = value.value.map(item => item.deptId)
    res.data.forEach(item => {
        if (selectIds.includes(item.id)) {
            item.checked = true
        }
        item.isParent = item.parent
    })
    return childNodes
}

const ztreeSetting = ztreeOption({
    onCheck,
    url: '/api/jchc-dcdb/business/zTreeQSecurity',
    async: true,
    dataFilter,
    chkStyle: check.value
})
onMounted(() => {
    nextTick(() => {
        overlayInnerStyle.width = `${myZtreeSelectRef.value.offsetWidth}px`
    })
})


const handleInitZtree = () => {
    nextTick(() => {
        ztreeExample.value = $.fn.zTree.init($(`#${ztreeId.value}`), ztreeSetting)
    })
}

const handleOpenChange = type => {
    if (!type) {
        if (ztreeExample.value) {
            ztreeExample.value.destroy()
        }
    }
}

</script>
<style lang="scss" scoped>
.my-ztree-select {
    .ant-input {
        cursor: pointer;
    }
}

.ztree-content {
    width: 100%;
    height: 200px;
    overflow: auto;
}

.__a {
    animation: __a 0.1s;
}

@keyframes __a {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1);
    }
}
</style>